<template>
    <div class="all">
      <header>
        <div class="div">
          <img src="../../assets/返回.png" @click="back()" alt="">
          <span class="solid" @click="back()">返回</span>
        </div>
        <div class="div">
          <span >订单详情</span>
        </div>
        <div class="div"></div>
      </header>
      <div class="type" v-if="isDoctor !== 1">
        <img style="width: 15px;height: 15px;margin-right: 8px" src="../../assets/订单状态.png" alt="">
<!--        公用-->
        <span v-show="item.status == 1" >待支付 剩余时间： {{minute}}分{{second}}秒</span>
        <span v-show="item.status == 4" >{{typeLabel}}中</span>
        <span v-show="item.status == 5" class="blue">已结束</span>
        <span v-show="item.status == 6 && item.refund_status == 1" >订单已取消，退款中</span>
        <span v-show="item.status == 6 && item.refund_status == 2">订单已取消，退款成功</span>
        <span v-show="item.status == 6 && item.refund_status == 3" >订单已取消，退款失败</span>
        <span  v-show="item.status == 6 && item.refund_status == null">订单已取消</span>

        <!--        图文-->
        <span v-show="item.status == 3 && item.type == 1" >待接诊</span>

<!--         视频咨询-->
        <span v-show="item.status == 2 && (item.type == 2 || item.type == 5)" >待接单</span>
        <span v-show="item.status == 3 && item.type == 2  && item.is_signin == 0" class="green">预约已确认</span>
        <span v-show="item.status == 3 && item.type == 2  && item.is_signin == 1" class="green">待接诊</span>
        <span v-show="item.status == 3 && item.type == 5" class="green">待接诊</span>

      </div>
      <div class="type" v-else>
        <img style="width: 15px;height: 15px;margin-right: 8px" src="../../assets/订单状态.png" alt="">
        <span  v-show="item.status == 2 && (item.book_status == null || item.book_status == 3) && item.type == 1">待预约</span>
        <span   v-show="item.status == 3 && item.type == 1">待接诊</span>
        <span  v-show="item.status == 4 ">{{typeLabel}}中</span>
        <span  v-show="item.status == 5">已结束</span>
        <span  v-show="item.status == 6" class="black">已退诊</span>

        <span v-show="item.status == 2 && (item.type == 2 || item.type == 5)" >待接单</span>
        <span v-show="item.status == 3 && item.type == 2  && item.is_signin == 0" class="green">预约已确认</span>
        <span v-show="item.status == 3 && item.type == 2  && item.is_signin == 1" class="green">待接诊</span>

      </div>
      <div class="label " style="margin-bottom: 5px">
        <p style="width: 100%;display: flex;justify-content: space-between">
          <span>
             <a >订单类型:</a>
            <a v-show="item.type == 1">图文咨询-</a>
            <a v-show="item.type == 2">视频咨询-</a>
            <a v-show="item.type == 5">远程会诊-</a>
            <a >{{item.item_id}}</a>
          </span>
          <span>
              <a style="color: #E3170D;">￥{{item.amount}}</a>
          </span>
        </p>
      </div>
<!--      <div class="label title" style="margin-bottom: 5px">-->
<!--        <p>-->
<!--          <a >订单金额：</a>-->
<!--          <a style="color: #E3170D">￥{{item.amount}}</a>-->
<!--        </p>-->
<!--      </div>-->
      <div class="box" v-if="isDoctor !== 1">
        <div class="label" >
          <a class="hengGang"></a>提供{{typeLabel}}人员
        </div>
        <div class="doctorInfo" >
          <div class="doctorLeft">
            <img v-if="item.doctorPhoto !== null && item.doctorPhoto !== undefined && item.doctorPhoto !== ''"
                 class="photo" :src="item.doctorPhoto" alt="">
            <img v-else class="photo" src="../../assets/男医生@2x.png" alt="">
          </div>
          <div class="doctorRight" >
            <p >
              <span class="name">{{item.NICK_NAME}}</span>
              <span style="margin: 0 5px;height: 100%;">|</span>
              <span class="name">{{item.MAJOR}}</span>
              <span style="margin: 0 5px;height: 100%;">|</span>
              <span class="name">{{item.DEPART}}</span>
<!--              <span class="biaoqian">{{item.GRADE}}</span>-->
              <span></span>
            </p>
            <p class="hospital">
              {{item.HOSPITAL_NAME}}
            </p>
          </div>
        </div>
      </div>
      <div class="box Pcontent">
        <div class="label">
          <a class="hengGang"></a>{{typeLabel}}内容
        </div>
        <p>{{typeLabel}}人信息：{{item.name}} &nbsp;&nbsp;
          <span v-show="item.SEX == 1">男</span>
          <span v-show="item.SEX == 2">女</span> &nbsp;
          {{item.age}}岁
        </p>
        <p>
          <a style="white-space: nowrap;">自述情况：</a>
          <a >{{item.illness_desc}} </a>
        </p>
        <p v-show="item.is_doc_medical == 0">
          是否需要医生指导用药：不需要
        </p>
        <p v-show="item.is_doc_medical == 1">
          是否需要医生指导用药：需要
        </p>
        <p v-show="item.is_hos_visit == 0">
          是否曾到医疗机构就诊：未到过
        </p>
        <p v-show="item.is_hos_visit == 1">
          是否曾到医疗机构就诊：到过
        </p>
      </div>
      <div class="box Pcontent" style="margin-bottom: 60px">
        <div class="label">
          <a class="hengGang"></a>订单信息
        </div>
        <p>订单编码：{{item.order_no}}</p>
<!--        <p>下单时间：{{item.created_at}}</p>-->
        <p >申请时间：{{item.created_at}} </p>
        <p v-show="item.status == 4 || item.status == 5">开始{{typeLabel}}时间：{{item.start_time}}</p>
        <p v-show=" item.status == 5">结束{{typeLabel}}时间：{{item.end_time}}</p>
        <p v-show="item.status == 4">已{{typeLabel}}：{{GetDateDiff(new Date() - new Date(item.start_time))}}</p>
        <p v-show="item.status == 6">订单取消时间：{{item.cancel_time}}</p>
        <p v-show="item.status == 6 && item.cancel_type !== 3">取消原因：
          <a v-show="item.cancel_type == 1">手工操作</a>
          <a v-show="item.cancel_type == 2 && item.refund_status == null">支付超时</a>
          <a v-show="item.cancel_type == 2&& item.refund_status !== null">接诊超时</a>
          <a v-show="item.cancel_type == 3">医生拒诊</a>
          <a v-show="item.cancel_type == 4">{{item.cancel_reason}}</a>
          <!--                  '取消类型 1:患者手动;2:系统自动;3:医生拒诊'-->
        </p>
        <p v-show="item.cancel_type == 3">退诊原因：{{item.cancel_reason}}</p>
        <p v-if="item.status == 1">应付金额：<span class="red">￥{{item.amount}}</span></p>
        <p v-else-if="item.status == 3 ||item.status == 4 || item.status ==5">已付金额：<span class="red">￥{{item.amount}}</span></p>
        <p v-show="(item.status == 2 || item.status == 3) && type == 5">
          预约{{typeLabel}}时间：{{item.book_date}}  {{item.book_time_start}} ~ {{ item.book_time_end}} </p>
      </div>
      <div class="bottom" v-show="item.status !== 6">
        <div v-if="item.status == 1" style="margin-left: 10px">合计：<span class="red">￥{{item.amount}}</span> </div>
        <div v-else></div>
        <div>
<!--           公用-->
<!--           未支付  取消订单-->
          <button class="box_button btnBule PayBtn"
                  @click.stop="cancel(item) "
                  v-show="item.status == 1 && userid == item.op_user_id">取消订单</button>
          <!--               未接诊取消-->
          <button class="box_button  allBtn btnBule bacBlue"
                  @click.stop="weiCancal(item)"
                  v-show="(item.status == 3 && item.type ==1) && isDoctor !== 1 && userid == item.op_user_id">取消订单</button>

          <!--                  待接诊取消-->
          <button class="box_button allBtn btnBule bacBlue" @click.stop="weiJieQuXiaoShiPin(item)"
                  v-show="(item.status == 2 && (item.type==2 || item.type == 5)) && isDoctor !== 1 && userid == item.op_user_id">取消订单</button>

          <!--未支付 立即支付-->
          <button class="box_button btnBule PayBtn bacBlue"
                  @click.stop="pay(item)"
                  v-show="item.status == 1 && userid == item.op_user_id">立即支付</button>

          <button class="box_button btnBlack "
                  @click.stop="guoCheng(item)"
                  :class="(item.status == 5 &&
                   item.is_advice_edit == 1 &&
                   isDoctor ==1) || (item.status == 5 && isDoctor !==1) ? 'banBtn' : 'allBtn'"
                  v-show="item.status == 5">查看{{typeLabel}}过程</button>

          <button class="box_button btnBlack banBtn bacBlue" @click="pingJia(item)"
                  v-show="item.status == 5 && isDoctor !==1">服务评价</button>

<!--          医生-->
          <button class="box_button btnBlack banBtn" @click="xiuGai(item)"
                  v-show="item.status == 5 &&
                   item.is_advice_edit == 1 &&
                   isDoctor ==1 && item.type !== 5">修改咨询结果</button>
          <button class="box_button btnBlack banBtn" @click="xiuGai(item)"
                  v-show="item.status == 5 &&
                   item.is_advice_edit == 1 &&
                   isDoctor ==1 && item.type == 5 && item.doc_user_id == userid">修改会诊结果</button>
<!--医生  患者-->
          <button class="box_button btnBule allBtn"
                  @click.stop="jumpZixun(item)"
                  v-show="item.status == 4 && item.type == 1">继续咨询</button>

          <!--       患者       视频咨询  status 3 已确认 签到-->

          <button class="box_button btnBlack allBtn bacBlue"
                  @click.stop="juZhen(item)"
                  v-show="(item.status == 3  && item.type == 2 && isDoctor == 1)">退诊</button>    <!--       患者       视频咨询  status 3 已确认 签到-->
          <button class="box_button btnBlack allBtn bacBlue"
                  @click.stop="qianDao(item)"
                  v-show="item.status == 3 && item.type == 2 && item.is_signin == 0 && isDoctor !== 1">签到</button>
<!--         视频医生-->
          <button class="box_button btnBlack allBtn bacBlue"
                  @click.stop="houZhen(item)"
                  v-show="item.status == 3 && item.type == 2 && item.is_signin == 1 && isDoctor !== 1">进入候诊室</button>
<!--          远程 患者-->
          <button class="box_button btnBlack allBtn bacBlue"
                  @click.stop="houZhen(item)"
                  v-show="item.status == 3 && item.type == 5 && isDoctor !== 1">进入候诊室</button>

          <button class="box_button btnBlack banBtn" @click.stop="yuYueCancel(item)"
                  v-show="item.status == 2 && (item.type ==2 || item.type == 5) && isDoctor == 1"
          >取消预约</button>
          <button class="box_button btnBule bacBlue banBtn"
                  @click.stop="yuYueconfirm(item)"
                  v-show="item.status == 2 && (item.type ==2 || item.type == 5) && isDoctor == 1"
          >确认预约</button>
        </div>
      </div>
      <van-dialog v-model="endShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  :title="`确认结束此次`+ typeLabel+`吗？`"
                  @confirm="endConfirm()"
                  show-cancel-button>
      </van-dialog>
      <van-dialog v-model="cancelShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="确认取消此订单吗？"
                  @confirm="cancelConfirm()"
                  show-cancel-button>
      </van-dialog>
      <van-dialog v-model="weiCancalShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="确认取消此订单吗？"
                  @confirm="weiCancalConfirm()"
                  show-cancel-button>
      </van-dialog>
      <van-dialog v-model="qianDaoShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="确认签到吗？"
                  @confirm="qianDaoConfirm()"
                  show-cancel-button>
      </van-dialog>
      <van-dialog v-model="yuYueconfirmShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="确认接受此次预约吗？"
                  @confirm="yuYueconfirmConfirm()"
                  show-cancel-button>
      </van-dialog>
      <van-dialog v-model="yuYueCancelShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="确认取消此次预约吗？"
                  @confirm="yuYueCancelConfirm()"
                  @cancel="cancel_reason = ''"
                  show-cancel-button>
        <template #default>
          <textarea placeholder="请填写取消预约原因~" v-model="cancel_reason" name="" id="" cols="30" class="juZhenInp" rows="10"></textarea>
        </template>
      </van-dialog>
      <van-dialog v-model="juZhenShow"
                  width="80%"
                  class="juzhen"
                  confirm-button-color="#1da4f2"
                  title="填写退诊原因"
                  @confirm="jujueConfirm()"
                  @cancel="cancel_reason = ''"
                  show-cancel-button>
        <template #default>
          <textarea placeholder="请填写退诊原因~" v-model="cancel_reason" name="" id="" cols="30" class="juZhenInp" rows="10"></textarea>
        </template>
      </van-dialog>
      <van-dialog v-model="weiJieQuXiaoShiPinShow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="确认取消此订单吗？"
                  @confirm="weiJieQuXiaoShiPinConfirm()"
                  show-cancel-button>
      </van-dialog>
      <!--     选医生-->
      <van-popup
        v-model="doctorShow"
        round
        :close-on-click-overlay="false"
        position="bottom"
        :style="{ height: '80%', bottom: '50px' }">
        <div class="popDiv" ref="box">
          <div class="top" style="position: sticky;top: 0;border-bottom: 1px solid #E5E5E5">
            <div class="popHeader" style="padding: 0 10px;box-sizing:border-box;">
              <span @click="doctorShow=false" style="width: 30%;">
                取消
              </span>
              <span style="width: 40%;display: flex;
                  justify-content: center;">
                  请选择医生
              </span>
              <span @click="yuYueconfirmConfirm" style="width: 30%;color:#1DA4F2;display: flex;justify-content: flex-end">
                  确定
              </span>
            </div>
            <van-search
              v-model="popSearchVal"
              shape="round"
              background="#FFF"
              placeholder="请输入搜索关键词"
            />
          </div>
          <div class="popbox"
               @click="clickPop(item)"
               :class="item.select == true ? 'selectDoctor' : ''"
               v-for="(item, index) in doctorsList" :key="index">
            <div class="box_left">
              <img v-if="item.PHOTO" :src="item.PHOTO" class="PHOTO" alt="">
              <img v-else src="../../assets/男医生@2x.png" class="PHOTO" alt="">
            </div>
            <div class="box_right">
              <ul>
                <li>
                  <span class="name">
                    <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
      <!--              <span>|</span>-->
      <!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>-->
      <!--              <span>|</span>-->
      <!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>-->
                  </span>
                </li>
                <li>
                  <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
                  <span>|</span>
                  <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
                </li>
                <li>
                  <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
                  <button class="biaoqian" v-if="item.GRADE">{{item.GRADE}}</button>
                </li>
              </ul>
<!--              <div class="box_rigth_bottom">-->
<!--                <p>-->
<!--                  <a >接诊率:</a><span>{{item.jiezhenCount}}</span>-->
<!--                  <a >好评率:</a><span>{{item.haopingLv}}</span>-->
<!--                  <a >咨询量:</a><span>{{item.zixunCount}}</span>-->
<!--                </p>-->
<!--                <p class="goodAt">-->
<!--                  <a style="display: block">擅长:</a>-->
<!--                  <span>{{item.Goodat}}</span>-->
<!--                </p>-->
<!--                <p>-->
<!--                  <a >最快回复:</a>-->
<!--                  <span style="color: #1DA4F2"  v-if="item.min !== undefined && item.min !== null && item.min !== ''">{{item.min}}</span>-->
<!--                  <span v-else style="color: #999999">暂无</span>-->
<!--                  <a >平均回复:</a>-->
<!--                  <span style="color: #1DA4F2" v-if="item.avg !== undefined && item.avg !== null && item.avg !== ''">{{item.avg}}</span>-->
<!--                  <span style="color: #999999" v-else>暂无</span>-->
<!--                </p>-->
<!--              </div>-->
            </div>
          </div>
          <van-loading v-show="popisLoading" size="24px" style="width: 100%;height: 80%;
            display:flex;align-items:center;justify-content:center; color: #1da4f2;background: #FFFFFF;" vertical>
            加载中...
          </van-loading>
          <van-empty
            style="width: 100%;height: 60%"
            v-show="doctorsList.length <= 0 && popisLoading === false"
            class="custom-image"
            :image="require('../../assets/空两本书.png')"
            description="暂无医生"
          />
        </div>
      </van-popup>
    </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: 'OrderInfo',
  data () {
    return {
      item: [],
      endShow: false,
      id: this.$route.query.id,
      isDoctor: Number(this.$route.query.isDoctor),
      cancelShow: false,
      weiCancalShow: false,
      time: 0,
      minutes: 30,
      seconds: 0,
      ITEM: '',
      timeInster: '',
      qianDaoShow: false,
      yuYueconfirmShow: false,
      yuYueCancelShow: false,
      cancel_reason: '',
      juZhenShow: false,
      weiJieQuXiaoShiPinShow: false,
      userid: this.$route.query.userid,
      type: Number(this.$route.query.type),
      doctorShow: false,
      doctorsList: [],
      popisLoading: true,
      popSearchVal: ''
    }
  },
  watch: {
    popSearchVal () {
      this.getTeamDoctor()
    }
  },
  mounted () {
    // orderInfo
    if (sessionStorage.getItem('order') !== null) {
      this.item = JSON.parse(sessionStorage.getItem('order'))
      var orderItem = JSON.parse(sessionStorage.getItem('order'))
      let nowTime = new Date(orderItem.created_at)
      if (orderItem.created_at !== 'NaN' && orderItem.created_at !== undefined && orderItem.created_at !== null) {
        // this.time = (30 - (Math.abs(new Date() - nowTime) / 1000 / 60)).toFixed(2)
        //
        // this.minutes = this.time.toString().split('.')[0]
        // this.seconds = Math.round(Number('0.' + this.time.toString().split('.')[1]) * 60)
        // this.time = new Date(30 - (new Date() - nowTime))
        let jianTime = 30 * 60 * 1000 - new Date(new Date() - nowTime)
        if (jianTime <= 0) {
          jianTime = 0
        }
        this.time = new Date(jianTime)
        this.minutes = this.time.getUTCMinutes()
        this.seconds = this.time.getUTCSeconds()
      }
      if (this.isDoctor !== 1 && this.item.status == 1) {
        this.timer()
      }
    }
  },
  computed: {
    typeLabel: function () {
      if (this.type !== 5) {
        return '咨询'
      } else {
        return '会诊'
      }
    },
    second: function () {
      var num = this.num(this.seconds)
      if (num <= 0) {
        num = 0
      }
      return num
    },
    minute: function () {
      var num = this.num(this.minutes)
      if (num <= 0) {
        num = 0
      }
      return num
    }
  },
  methods: {
    // 获取 远程 团队成员
    getTeamDoctor () {
      this.doctorsList = []
      this.popisLoading = true
      this.$http.findDoctor({team_id: this.ITEM.team_id, name: this.popSearchVal})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let data = res.data.data
            this.popisLoading = false
            data.map((curr, index) => {
              if (this.userid == curr.USER_ID) {
              } else {
                this.doctorsList.push(curr)
              }
            })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 远程会诊选择会诊医生
    clickPop (item) {
      if (item.select) {
        item.select = !item.select
      } else {
        this.$set(item, 'select', true)
      }
    },
    weiJieQuXiaoShiPinConfirm () {
      this.$http.weiJieQuXiaoShiPin({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.weiJieQuXiaoShiPinShow = false
            this.getData()
            Toast('订单取消成功')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    weiJieQuXiaoShiPin (item) {
      this.ITEM = item
      this.weiJieQuXiaoShiPinShow = true
    },
    // 医生端 图文退诊
    // 订单详情 医生端和患者端 不同状态展示不同按钮和内容；视频咨询选择排班
    jujueConfirm () {
      if (this.cancel_reason === '') {
        Toast('请填写退诊原因')
        this.juZhenShow = true
        return false
      } else {
        this.$http.doctorNoJieZhen({id: this.ITEM.id, cancel_reason: this.cancel_reason})
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              Toast('退诊成功')
              this.cancel_reason = ''
              this.juZhenShow = false
              this.$router.history.go(-1)
              if (this.type == 5) {
                if (sessionStorage.getItem('sys') === 'ANDROID') {
                  window.WebViewJavascriptBridge.callHandler('dismissGroup', this.ITEM.im_group_id, function (responseData) {})
                }
              }
            } else {
              Toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 医生端 图文退诊
    juZhen (item) {
      this.ITEM = item
      this.juZhenShow = true
      // cancel_reason 拒绝诊断理由
    },
    // 取消预约
    yuYueCancelConfirm () {
      if (this.cancel_reason === '' || this.cancel_reason === undefined) {
        Toast('请填写取消预约原因')
        this.yuYueCancelShow = true
        return false
      } else {
        this.$http.updateInQuYuYue({id: this.ITEM.id, cancel_reason: this.cancel_reason})
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              Toast('取消预约成功')
              this.$router.history.go(-1)
              this.cancel_reason = ''
            } else {
              Toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 同意预约
    yuYueconfirmConfirm () {
      let list = ''
      this.doctorsList.map((curr, index) => {
        if (curr.select == true) {
          list += curr.USER_ID + ','
        }
      })
      this.$http.updateInYuYue({id: this.ITEM.id, doclist: list})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            if (this.ITEM.type == 5) {
              this.yuanChengTuandui()
              this.doctorShow = false
            }
            this.getTuWenData()
            Toast('预约成功')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    yuanChengTuandui () {
      this.$http.getInquiryGroup({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            if (sessionStorage.getItem('sys') === 'ANDROID') {
              let obj = {
                id: this.ITEM.id,
                data: res.data.data,
                type: this.ITEM.type
              }
              window.WebViewJavascriptBridge.callHandler('addDoctorGroupChat', JSON.stringify(obj), function (responseData) {})
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 医生 视频 预约确认
    yuYueconfirm (item) {
      // updateInYuYue
      // this.ITEM = item
      // this.yuYueconfirmShow = true

      this.ITEM = item
      if (this.type == 5) {
        this.getTeamDoctor()
        this.doctorShow = true
      } else {
        this.yuYueconfirmShow = true
      }
    },
    // 医生 视频 预约取消
    yuYueCancel (item) {
      // updateInQuYuYue
      this.ITEM = item
      this.yuYueCancelShow = true
    },
    // 会诊室
    houZhen (item) {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('goToConsultWaitRoom', item.id, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 签到
    qianDao (item) {
      this.ITEM = item
      this.$http.updateInQianDao({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getData()
            this.qianDaoShow = false
            Toast('签到成功')
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
      // this.qianDaoShow = true
      // updateInQianDao
    },
    // 签到确认按钮
    qianDaoConfirm () {
      this.$http.updateInQianDao({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getData()
            this.qianDaoShow = false
            Toast('签到成功')
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 倒计时
    num (n) {
      return n < 10 ? '0' + n : '' + n
    },
    timer () {
      var _this = this
      this.timeInster = window.setInterval(function () {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59
          _this.minutes -= 1
        } else if (_this.minutes <= 0 && _this.seconds <= 0) {
          _this.seconds = 0
          window.clearInterval(_this.timeInster)
          _this.back()
        } else {
          _this.seconds -= 1
        }
      }, 1000)
    },
    // 计算 已会诊时长
    GetDateDiff (mss) {
      var date = new Date(mss)
      let hour = date.getUTCHours()
      let min = date.getUTCMinutes()
      if (hour < 10) {
        hour = '0' + hour
      }
      if (min < 10) {
        min = '0' + min
      }
      return hour + '小时' + min + '分钟'
    },
    // 修改咨询建议
    xiuGai (item) {
      sessionStorage.removeItem('doc_advise')
      // /viewWenzhenSuggest
      this.$router.push({path: '/viewWenzhenSuggest', query: {id: item.id, is_advice_edit: item.is_advice_edit}})
    },
    // 服务评价
    pingJia (item) {
      Toast('功能正在开发中..')
    },
    // 查看咨询过程
    guoCheng (item) {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('consultChatHistory', item.id, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 未接诊取消订单 确认
    weiCancalConfirm () {
      this.$http.weiJieQuXiao({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.weiCancalShow = false
            Toast('订单取消成功')
            this.$router.history.go(-1)
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 未接诊取消订单
    weiCancal (item) {
      this.ITEM = item
      this.weiCancalShow = true
    },
    // 患者端 未支付 取消订单
    cancel (item) {
      this.ITEM = item
      this.cancelShow = true
    },
    // 取消订单确认按钮
    cancelConfirm () {
      this.$http.weiZhiQuXiao({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getData()
            this.cancelShow = false
            this.$router.history.go(-1)
            Toast('订单取消成功')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取数据
    getData () {
      this.$http.findOneInquiry({
        id: this.id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.item = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 立即预约跳转 视频咨询
    YuYue (item) {
      sessionStorage.setItem('order', JSON.stringify(item))
      this.$router.push({path: '/tuWenYuyue', query: {id: item.id}})
    },
    // 点击医师建议
    jianyi (id) {
      this.$router.push({path: '/doctorJianyi', query: {ID: id}})
    },
    // 结束 确认按钮
    endConfirm () {
      this.$http.endTuWenZhen({id: this.item.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$router.history.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    jieShu () {
      this.endShow = true
    },
    FaQi (item) {
      var time = item.book_date + ' ' + item.book_time
      if (new Date() > new Date(time)) {
        this.$http.updateInquShiPin({id: item.id})
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.jumpZixun(item)
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        Toast('未到预约时间，稍后再试')
      }
    },
    // 点击跳转安卓聊天
    jumpZixun (item) {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('doctorPatientChat', item.doc_user_id + ',' +
          item.NICK_NAME + ',' +
          item.type + ',' + item.id, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 支付
    pay () {
      sessionStorage.removeItem('DATA')
      sessionStorage.removeItem('FirstData')
      sessionStorage.removeItem('SecondData')
      this.$router.push({path: '/third', query: {detail: 1}})
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
  .popHeader,
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    position: sticky;
    top: 0px;
    background: white;
  }
  .div{
    width: 33%;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .solid{
    color: #1DA4F2;
  }
  .type{
    width: 100%;
    height: 60px;
    background: #1DA4F2;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .label{
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    background: white;
  }
  .title{
    height: 35px !important;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin-right: 5px;
  }
  .box{
    margin-bottom: 5px;
    background: white;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
  .Pcontent p{
    display: flex;
    /*align-items: center;*/
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-bottom: 8px;
  }
  .box_button{
    height: 29px;
    /*border-radius: 20px;*/
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
    /*margin-left: 10px;*/
    /*padding: 0 10px;*/
    box-sizing: border-box;
  }
  .red{
    color: #E3170D;
    /*border: 1px solid #E3170D;*/
  }
  .bule{
    color: #1DA4F2;
    border: 1px solid #1DA4F2;
  }
  .bottom{
    width: 100%;
    height: 50px;
    background: white;
    position: fixed;
    bottom: 50px;
    /*padding-left: 10px;*/
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bottom div{
    display: flex;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .photo{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
  }
  .doctorInfo{
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
  }
  .doctorLeft{
    width: 20%;
  }
  .doctorRight{
    width: 80%;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .hospital{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .doctorRight p{
    width: 100%;
    display: flex;
    align-items: center;
  }
  .name{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .biaoqian{
    padding: 3px 8px;
    border-radius: 15px;
    box-sizing: border-box;
    background: rgba(29, 164, 242, 0.1);
    color: #1DA4F2;
    border: none;
    font-size: 11px;
    margin-left: 8px;
  }
  .btnBlack{
    color: #333;
    border: 1px solid #E5E5E5;
  }
  .btnBule{
    color: #1da4f2;
    border: 1px solid #1DA4F2;
  }
  .PayBtn{
    min-width: 100px;
    height: 50px;
  }
  .allBtn{
    width: 100vw;
    height: 50px;
    /*color: #1da4f2;*/
    border: none;
    border-top: 1px solid #E5E5E5;
  }
  .bacBlue{
    background: #1da4f2;
    color: #fff;
  }
  .banBtn{
    width: 50vw;
    height: 50px;
  }
  .btnGary{
    border: 1px solid #E5E5E5;
    color: #333;
  }
  /deep/ .van-dialog__header{
    padding: 24px 0;
    box-sizing: border-box;
  }
  /deep/ .juzhen .van-dialog__header {
    padding: 10px 0;
    box-sizing: border-box;
    /* padding-top: 18px; */
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
  }
  .juZhenInp{
    width: 90%;
    height: 130px;
    background: #FAF9FE;
    border-radius: 5px;
    margin: 10px 5%;
    padding: 10px;
    box-sizing: border-box;
    font-size: 15px;
    border: none;
    resize: none;
  }


  .popDiv{
    background: #FAF9FE;
  .popbox{
    padding: 10px;
    box-sizing: border-box;
    background: white;
    margin-bottom: 8px;
    display: flex;
  }
  .all .popbox:last-of-type{
    margin-bottom: 60px;
  }
  .PHOTO{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
  }
  .box_left{
    width: 23%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
  }
  .dict_name{
    font-size: 11px;
    border: 1px solid #1DA4F2;
    border-radius: 2px;
    background: rgba(16, 184, 246, 0.1);
    color: #1da4f2;
    padding: 1px 3px;
    box-sizing: border-box;
    white-space: nowrap;
    /*margin-top: 10px;*/
  }
  .box_right{
    width: 78%;
  }
  .box_right ul{
    /*height: 60px;*/
    display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-content: space-around;
  }
  .box_right ul li{
    display: flex;
    align-items: center;
    font-size: 13px;
    font-family: PingFang SC;
    min-height: 25px;
  }
  .box_right ul li:nth-child(1){
    justify-content: space-between;
  }
  .name{
    font-size: 15px!important;
    font-weight: bold;
    color: #333333;
  }
  .biaoqian{
    /*padding: 0px 8px;*/
    min-width: 44px;
    height: 18px;
    border-radius: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* background: rgba(29, 164, 242, 0.1); */
    background: transparent;
    color: #1DA4F2;
    /* border: none; */
    border: 1px solid;
    font-size: 11px;
    margin-left: 8px;
  }
  .btnXiangQing{
    color: white;
    background: #1DA4F2;
    border: none;
    padding: 3px 8px;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 11px;
  }
  .btnXiangQing img{
    width: 5px;
    height: 9px;
    margin-left: 5px;
  }

  .btnXiangQing,
  .biaoqian,
  .jieShao
  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jieShao{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-right: 8px;
  }
  .box_rigth_bottom{
    margin-top: 5px;
  }
  .box_rigth_bottom p{
    margin-bottom: 5px;
  }
  .box_rigth_bottom p:nth-child(1),
  .box_rigth_bottom p:nth-child(3){
    font-size: 13px;
  }
  .box_rigth_bottom p a{
  }
  .box_rigth_bottom p span{
    color: #E3170D;
    margin: 0 8px 0 3px;
  }
  .goodAt{
    font-size: 13px;
    display: flex;
  }
  .goodAt a{
    display: block;
    white-space: nowrap;
  }
  .goodAt span{
    /*width: 80%;*/
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #333 !important;
  }
  .selectDoctor{
    background: rgba(29, 164, 242, 0.1) !important;
  }
  }

</style>
